Highcharts ব্যবহার করে আপনি ডায়নামিক ডেটার মাধ্যমে আপনার চার্ট আপডেট করতে পারেন। Angular এবং Highcharts একত্রে ব্যবহার করার সময়, আপনি বিভিন্নভাবে ডেটা পরিবর্তন করতে পারেন এবং সেই অনুযায়ী চার্টের ভিজ্যুয়াল রিফ্রেশ বা আপডেট করতে পারেন।

এখানে, আমরা দেখব কিভাবে ডায়নামিক ডেটা ব্যবহার করে Highcharts চার্ট আপডেট করা যায়।

ডায়নামিক ডেটা ইনজেকশন

Highcharts এর মধ্যে ডায়নামিক ডেটা ইনজেকশন করতে হলে, আপনি আপনার কম্পোনেন্টের মধ্যে ডেটা পরিবর্তন করবেন এবং সেই অনুযায়ী Highcharts কম্পোনেন্ট আপডেট হবে। Angular এর ngOnChanges বা setInterval এর মাধ্যমে ডেটা আপডেট করতে পারেন।

এখানে, আমরা একটি setInterval ব্যবহার করে প্রতি ২ সেকেন্ডে ডেটা পরিবর্তন করার উদাহরণ দেখাব।

উদাহরণ: ডায়নামিক ডেটা দিয়ে চার্ট আপডেট করা

1. app.component.ts ফাইলে Highcharts এর জন্য ডায়নামিক ডেটা কনফিগারেশন করুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  // ডিফল্ট ডেটা
  chartData = [1, 2, 3, 4, 5, 6, 7, 8];

  ngOnInit() {
    // প্রথমে চার্টের অপশন সেট করা
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'ডায়নামিক ডেটা দিয়ে আপডেট হওয়া চার্ট'
      },
      series: [{
        name: 'Sales',
        data: this.chartData
      }]
    };

    // প্রতি ২ সেকেন্ডে ডেটা পরিবর্তন করে চার্ট আপডেট করা
    setInterval(() => {
      // নতুন ডেটা তৈরি
      this.chartData = this.chartData.map(data => data + Math.floor(Math.random() * 10));

      // Highcharts এর মাধ্যমে চার্ট আপডেট করা
      this.updateChart();
    }, 2000);
  }

  // Highcharts চার্ট আপডেট করা
  updateChart() {
    // Highcharts.chart() ব্যবহার করে চার্ট আপডেট করা
    Highcharts.charts[0].series[0].setData(this.chartData);
  }
}

2. app.component.html ফাইলে Highcharts কম্পোনেন্ট যোগ করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

ব্যাখ্যা:

1. chartOptions: আমরা প্রথমে chartOptions সেট করছি যা আমাদের চার্টের কনফিগারেশন ধারণ করে।
2. chartData: একটি ডিফল্ট ডেটা সিরিজ হিসেবে শুরুতে আমরা কিছু সংখ্যা ব্যবহার করেছি। এই ডেটাটি প্রতি ২ সেকেন্ডে পরিবর্তিত হবে।
3. setInterval: প্রতি ২ সেকেন্ডে setInterval ব্যবহার করে ডেটা আপডেট করা হচ্ছে। এই সময়ে একটি random number যোগ করা হচ্ছে প্রতিটি ডেটা পয়েন্টে।
4. updateChart(): Highcharts.charts[0].series[0].setData(this.chartData); ব্যবহার করে, আমরা Highcharts লাইব্রেরির মাধ্যমে নতুন ডেটা ইনজেক্ট করে চার্ট আপডেট করছি।

Highcharts এর সাথে ডায়নামিক ডেটা হ্যান্ডলিং

Highcharts এ ডেটা আপডেট করার জন্য setData() ফাংশন ব্যবহার করা হয়, যা পূর্ববর্তী ডেটাকে নতুন ডেটার সাথে প্রতিস্থাপন করে।

এছাড়াও, আপনি ডেটা আপডেট করার সময় animation বা smooth transitions ব্যবহার করতে পারেন যাতে ব্যবহারকারীর জন্য এটি আরো ইন্টারঅ্যাকটিভ হয়।

সারাংশ

Highcharts এর মাধ্যমে ডায়নামিক ডেটা ব্যবহার করে আপনি রিয়েল-টাইম ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। Angular এর মধ্যে setInterval বা অন্যান্য ডেটা পরিবর্তনের পদ্ধতি ব্যবহার করে আপনি আপনার চার্টের ডেটা প্রতি সেকেন্ডে বা সময় অনুযায়ী আপডেট করতে পারেন। setData() ফাংশন দিয়ে Highcharts চার্টে নতুন ডেটা ইনজেক্ট করার মাধ্যমে ডায়নামিক এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করা সম্ভব।